<template>
  <div class="TradeList">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">交易信息统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索部分 -->
    <div class="trade-search">
      <el-form ref="form"
               :model="form"
               label-width="90px">
        <div class="tra-search">
          <el-form-item label="用户姓名">
            <el-input v-model="form.content"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="tra-search">
          <el-form-item label="交易流水号">
            <el-input v-model="form.serialnumber"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="tra-search">
          <span class="demonstration">创建时间</span>
          <el-date-picker v-model="form.value"
                          type="datetime"
                          placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="tra-search">
          <el-form-item>
            <el-button>重置</el-button>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="list">
      <div class="list-name">
        <b>交易列表</b>
        <div class="but">
          <el-button type="primary">导出</el-button>
        </div>
      </div>
    </div>
    <div>
      <template>
        <el-table :data="bannerlist"
                  style="width: 100%">
          <el-table-column label="交易用户">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.user }}</span>
            </template>
          </el-table-column>

          <el-table-column label="交易类型">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="核桃币">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易时间">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易流水号">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.Water }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.state }}</span>
            </template>
          </el-table-column>

        </el-table>
      </template>
    </div>

  </div>
</template>

<script>
export default {
  name: "TradeList",
  data () {
    return {
      form: {
        content: '',
        serialnumber: '',
        value: '',
      },
<<<<<<< Updated upstream
      page: 1,
      size: 5,
      tradelist: [{ id: 1, user: "张三", type: "充值", money: "￥20.11", time: "2017-08-14 14:21:00", Water: "1182394", state: "交易成功" },
      { id: 2, user: "李四", type: "消费病例探讨", money: "￥19.11", time: "2017-08-14 14:21:00", Water: "1183495", state: "交易失败" },
      { id: 3, user: "王五", type: "患教活动收入", money: "￥14.11", time: "2017-08-14 14:21:00", Water: "1183677", state: "交易成功" },
      { id: 4, user: "赵六", type: "消费患教活动", money: "￥23.11", time: "2017-08-14 14:21:00", Water: "1154987", state: "交易失败" },
      { id: 5, user: "孙七", type: "充值", money: "￥27.11", time: "2017-08-14 14:21:00", Water: "1177569", state: "交易失败" },
      { id: 6, user: "王二狗", type: "充值", money: "￥11.11", time: "2017-08-14 14:21:00", Water: "1133269", state: "交易成功" },
      { id: 7, user: "张全蛋", type: "消费病例探讨", money: "￥25.11", time: "2017-08-14 14:21:00", Water: "1178945", state: "交易失败" },
      { id: 8, user: "王尼玛", type: "充值", money: "￥20.11", time: "2017-08-14 14:21:00", Water: "1132578", state: "交易成功" }
      ],
      tradecount: 0
    }
  },
  mounted () {
    // this.gettradelist()
  },
  methods: {
    handleSizeChange (val) {
      this.size = val
      console.log(`每页 ${val}条`);
      this.gettradelist.splice(0)
      // this.gettradelist();
    },
    handleCurrentChange (val) {
      this.bannerlist.splice(0)
      this.page = val
      console.log(`当前页: ${val}`);
      // this.gettradelist()
    },
    //分页获取全部
    // gettradelist () {
    //   this.$service.tradeService.gettradelist(this.page, this.size).then(res => {
    //     // this.tradecount = res.data.data.integer;
    //     // this.tradelist = res.data.maps;
    //     console.log(11, res)
    //   })
    // }
  }
=======
      bannerlist: []
    }
  },
  mounted () {
  },
  methods: {}
>>>>>>> Stashed changes
}
</script>

<style scoped lang="less">
.trade-search {
  margin-top: 30px;
  overflow: hidden;
}
.tra-search {
  float: left;
  padding-left: 40px;
}
.list {
  margin-top: 50px;
  .list-name {
    overflow: hidden;
    .but {
      float: right;
    }
  }
}
</style>
